// 先导入变量
@use './_variables' as *;
@use './_mixins' as *;
// 服务卡片组件样式
.service {
  &-section {
    background-color: $background-color-base;
    padding: $spacing-extra-large 0;
  }

  &-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }

  &-card {
    background: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-extra-large;
    text-align: center;
    transition: $transition-base;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;

      .service-icon {
        transform: scale(1.1);
      }
    }
  }

  &-icon {
    font-size: 48px;
    color: $primary-color;
    margin-bottom: $spacing-large;
    transition: $transition-base;
  }

  &-title {
    font-size: $font-size-large;
    color: $text-primary;
    margin-bottom: $spacing-base;
  }

  &-description {
    font-size: $font-size-base;
    color: $text-regular;
    line-height: 1.6;
  }
} 